<template>
  <el-container>
    <el-header>
      <div class="index-header">
        <div>
          <h2>后台管理系统</h2>
        </div>
        <div>
          <el-dropdown class="index-header-right">
            <span>
              欢迎 admin
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu index="2">
                <el-dropdown-item index="2-1">个人信息</el-dropdown-item>
                <el-dropdown-item index="2-1" @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<!--          <el-radio-button size="small" :value="false"><el-icon><Expand/></el-icon></el-radio-button>-->
<!--          <el-radio-button size="small" :value="true"><el-icon><Fold/></el-icon></el-radio-button>-->
        </el-radio-group>
        <el-menu
            :default-active="ac_index"
            @select="Select"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
        >
<!--          <el-menu-->
<!--              :default-active="ac_index"-->
<!--              @select="Select"-->
<!--              class="el-menu-vertical-demo"-->
<!--              :collapse="isCollapse"-->
<!--              @open="handleOpen"-->
<!--              @close="handleClose"-->
<!--          >-->
          <div v-for="(item, index) in menu" :key="index">
            <!--     router-link实现点击菜单跳转功能页面       -->
            <router-link :to="{path: item.router}">
              <!--     没有子菜单       -->
              <el-menu-item v-if="item.subclass.length === 0" :index="item.id">
                <el-icon class="my-icon">
                  <!--   注册成为组件   -->
                  <component :is="item.icon"/>
                </el-icon>
                <span>{{item.title}}</span>
              </el-menu-item>
            </router-link>

            <!--  有子菜单   -->
            <el-sub-menu v-if="item.subclass?.length > 0" :index="item.id">
              <template #title>
                <el-icon class="my-icon">
                  <component :is="item.icon"/>
                </el-icon>
                <span v-text="item.title"></span>
              </template>
              <div v-for="(two, index_two) in item.subclass" :key="index_two">
<!--                <el-menu-item-group> 这两个效果一样
                  <el-menu-item :index="two.id">{{two.title}}</el-menu-item>
                </el-menu-item-group>-->
                <!--     router-link实现点击菜单跳转功能页面       -->
                <router-link :to="{path: two.router}">
                  <el-menu-item :index="two.id">{{two.title}}</el-menu-item>
                </router-link>
              </div>
            </el-sub-menu>
          </div>
        </el-menu>
      </el-aside>
      <el-main>

      </el-main>
    </el-container>
  </el-container>
  <router-view></router-view>
</template>

<script>
import {ref, reactive, onMounted,markRaw} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  User,
  Memo,
  Bowl,
  Expand,
  Fold,
  ArrowDown
} from '@element-plus/icons-vue'
export default {
  name: "index",
  // 注册组件
  components: {
    ArrowDown,
    Location,
    Document,
    Setting,
    IconMenu,
    User,
    Memo,
    Bowl,
    Expand,
    Fold
  },
  setup() {
    const isCollapse = ref(false)

    // const handleOpen = (key, keyPath) => {
    //   console.log("key:" + key, keyPath)
    // }
    // const handleClose = (key, keyPath) => {
    //   console.log(key, keyPath)
    // }

    const menuArray = [
      {
        id: '1',
        icon: Location,
        title:'数据分析',
        router:'/index',
        subclass:[]
      }
      ,
      {
        id: '2',
        icon: User,
        title:'用户管理',
        router:'/user',
        subclass:[]
      }
      ,
      {
        id: '3',
        icon: Memo,
        title:'订单管理',
        router:'/order',
        subclass:[]
      }
      ,
      {
        id: '4',
        icon: Bowl,
        title:'菜品管理',
        router:'/menu',
        subclass:[]
      }
      ,
      {
        id: '5',
        icon: User,
        title:'员工管理',
        router:'/customer',
        subclass:[]
      }
      ,
      {
        id: '6',
        icon: Setting,
        title:'系统管理',
        router:'',
        subclass:[
          {
            id: '61',
            icon: '/permission',
            title:'权限管理',
            router:''
          },
          {
            id: '62',
            icon: '/log',
            title:'日志管理',
            router:''
          }
        ]
      }
    ]

    const menu = markRaw(menuArray)

    const ac_index = ref('1')
    const Select = (index, path) => {
      localStorage.setItem("menuId", JSON.stringify(index))
      console.log(index, path)
    }

    const logout = ()=> {
      localStorage.removeItem("menuId")
      localStorage.removeItem("token")
      window.location.href='/'
    }

    // 生命周期函数
    onMounted(() => {
      ac_index.value = JSON.parse(localStorage.getItem('menuId'));
    })

    return {ac_index, menu, isCollapse, Select, logout}
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  min-height: 400px;
}

</style>